﻿<!DOCTYPE html>
<html lang="zh-CN">
  <head>
      <meta charset="utf-8">
      <!--不支持老版本IE-->
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>网上新闻发布</title>
    <!-- Bootstrap 核心样式文件 -->
      <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">
      <script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
      <script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
      <style type="text/css">
          /*设置body，不要让导航条（默认50px）压到下面的内容*/
           body { padding-top: 40px; }

          /*图片设置大小*/
          .carousel-inner .item img {
              height: 400px;
              width: 100%;
          }
          /*调整圆角图片大小*/
          .img-circle {
              width: 250px;  
          }
          .img-thumbnail {
          	  width:300px;
      		  height:160px
          }
      </style>

  </head>

  <body>
       <!-----------------------------------------导航条设计开始--------------------------------->
       <!--黑色导航条样式为navbar-inverse，白色样式为default  ，fixed-top导航条固定在顶端-->
      <nav class="navbar navbar-inverse navbar-fixed-top">
          <div class="container-fluid">            
                  <!--导航栏右部，一般的登录 注册-->
              {{#TEST_TABLE}}
                  <ul class="nav navbar-nav navbar-right">
                    {{#TEST_TABLE_ITEM}}
                            {{LABEL}}
                    {{/TEST_TABLE_ITEM}}
                  </ul>
          </div><!-- /.container-fluid -->
      </nav>
       <!------------------------------------------导航条结束-------------------------------->
       


            <!-- 包装的轮播图片 -->
    <div class="carousel-inner" role="listbox">
                <!-- 图片 -->
			<div class   ="item active">
			     <img src  ="Images/34.jpg" alt="风景1"></img>
				<div class   ="carousel-caption">
				<!-- h4中的内容显示到图片上面，-->
					<h1>网上新闻发布系统</h1>
					<!--搜索表单-->
					<form  action="./cgi_userSearch?" class="navbar-form .navbar-right ~ .navbar-right" role="search" method="GET">
					  <div class   ="form-group">
						  <input type  ="text" class="form-control" name="page=1&keyword" placeholder="Search">
					  </div>
					<button type ="submit" class="btn navbar-btn">搜索</button>
					</form>
				</div>
      </div>
    </div>

        <!---------主题 container居中------------------>
      <div class="container">
           <!--声明行-->
           <div class="row  .justify-content-xl-center">
               <center><h2>主题栏</h2></center>
           </div>
           <div class="row">
               <!--为3的栅格系统，相对于一行放四个-->
                    {{#TEST_TABLE_ITEM1}}
               <div class="col-sm-3">
                   <!--img-thumbnail 方形加外边框-->
                   <img src="Images/{{NAME}}.jpg"  class="img-thumbnail" alt="{{NAME}}"/>
                   <center><a href="cgi_display?topic={{NAME}}&page=1" class="btn btn-success btn-lg btn-link">{{NAME}}</a></center>
               </div>
                    {{/TEST_TABLE_ITEM1}}
           </div>
       </div>
       
       <div class="container">
           <!--声明行-->
           <div class="row">
               <center><h2>最新新闻</h2></center>
           </div>
           <div class="row">
                    {{#TEST_TABLE_ITEM2}}
                    <!--这里将href标签的属性从双引号括起来变成单引号，因为里面的标题可能有双引号 -->
                <center><a href='cgi_newsforuser?title={{TITLE}}' class="btn btn-success btn-lg btn-link">{{TITLE}}</a></center>
                    {{/TEST_TABLE_ITEM2}}
           </div>
       </div>
              {{/TEST_TABLE}}

  </body>
</html>

